<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="addDialogVisible = true">添加角色</el-button>
    <el-table :data="roleList" border scripe>
    <!-- 添加展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 每一行的一级权限.scope.row.children: [所有的一级权限] -->
            <el-row class="border_bottom" :class="index === 0 ? 'border_top':''"  v-for="(item, index) in scope.row.children" :key="item.id">
              <!-- 展示一级权限名称 5: 200px -->
              <el-col :span="8">
                <el-tag>{{ item.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 二级的权限 -->
              <el-col :span="16">
                <!-- 每一行的二级权限 -->
                <el-row v-for="(item2, index2) in item.children" :key="item2.id" :class="index2 ===0 ? '' : 'border_top'">
                  <!-- 展示二级权限名称 -->
                  <el-col :span="6">
                    <el-tag type="success">{{ item2.authName }}</el-tag>
                   <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 三级的权限 -->
                  <el-col :span="18">
                    <el-tag @close="removeTag(scope.row, item3.id)" closable type="warning" v-for="item3 in item2.children" :key="item3.id"> {{ item3.authName }} </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" circle>编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" circle>删除</el-button>
                <el-button @click="setRights(scope.row)" size="mini" type="warning" icon="el-icon-setting" circle>分配权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
      @close="setDialog"
      title="分配权限"
      :visible.sync="setRightsDialogVisible"
      width="50%">
      <!-- data: 传递整个树形数据 -->
      <!-- props： 配置树形控件的配置对象 -->
      <el-tree ref="tree" node-key="id" :default-checked-keys="defkeys" default-expand-all show-checkbox :data="rights" :props="defaultProps"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSetRights">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      roleList: [],
      setRightsDialogVisible: false,
      rights: [],
      // 配置属性组件 显示文本的字段名
      defaultProps: {
        label: 'authName'
      },
      // 设置树形默认选中
      defkeys: [],
      roleId: ''
    }
  },

  created () {
    this.getRoleList()
  },

  methods: {
    async getRoleList () {
      const { data: res } = await this.$axios.get('roles')
      if (res.meta.status !== 200) return this.$message.error('获取角色列表失败')
      this.roleList = res.data
    },
    removeTag (row, rightId) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '删除该权限吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.delete(`roles/${row.id}/rights/${rightId}`)
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功!')
        row.children = res.data
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 点击显示分配权限对话框
    async setRights (row) {
      this.setRightsDialogVisible = true
      const { data: res } = await this.$axios.get('rights/tree')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取列表失败')
      this.rights = res.data
      this.getAllkeys(row)
      this.roleId = row.id
    },
    getAllkeys (row) {
      if (!row.children) return this.defkeys.push(row.id)
      // 递归调用
      row.children.forEach(item => {
        this.getAllkeys(item)
      })
    },
    setDialog () {
      this.defkeys = []
    },
    // 提交分配权限
    async submitSetRights () {
      // 角色id： this.roleId
      console.log(this.roleId)
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      const rids = [...checkedKeys, ...halfCheckedKeys].join(',')
      // console.log(rids)
      const { data: res } = await this.$axios.post('roles/' + this.roleId + '/rights', { rids })
      if (res.meta.status !== 200) return this.$message.error('更新失败')
      this.setRightsDialogVisible = false
      this.getRoleList()
      this.$message.success('更新成功')
    }
  }
}
</script>

<style scoped lang='less'>
.el-button {
  margin-top: 15px;
}
.border_bottom {
  border-bottom: 1px solid purple;
}
.border_top {
  border-top: 1px solid purple;
}
.el-row {
  display: flex;
  align-items: center;
}
</style>
